<template>
  <!-- 新闻资讯 -->
  <div class="news">
    <!-- <img class="news_bg" src="@/assets/images/news_bg.png" alt /> -->
    <!-- 组件标题 -->
    <div class="title">
      <div class="text">ニュース</div>
      <!-- <p>業界ニュースを追跡し、法的ニュースに焦点を合わせる</p> -->
    </div>
    <div class="news_box">
      <!-- <div class="news_box_left">
        <div class="news_options">
         <div
            v-for="(item,index) in news_cate"
            :key="index"
            class="news_options_item"
            :class="[currentIndex == index?'news_options_item_active':'']"
            @click="getNews_list(1,4,item.id ,index)"
          >
            <div class="item">
             
              <img :src="item.image" alt />
              <div>{{item.title}}</div>
            </div>
          </div>
          <div
            class="news_options_item"
            :class="{news_options_item_active:currentIndex==2}"
            @click="onProblem_list"
          >
            <div class="item">
               
              <img src="@/assets/images/problem_icon.png" alt />
              <div>問題解決</div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="news_box_right" style="max-width:1200px;margin:0 auto;">
        <div
          class="news_box_right_silide"
          v-for="(item, index) in news_list"
          :key="index"
          @click="onNewsItem(index)"
        >
          <div class="slide_left">
            <h3>{{ item.time[2] }}</h3>
            <i></i>
            <p>{{ item.time[0] }}-{{ item.time[1] }}</p>
          </div>
          <div class="slide_right">
            <h4>{{ item.title }}</h4>
            <p>{{ item.synopsis }}</p>
            <div class="mobile_time">
              {{ item.time[0] }}-{{ item.time[1] }}-{{ item.time[2] }}
            </div>
            <div class="item_more">もっと</div>
          </div>
        </div>
      </div>
      <!-- <div v-if="ifHideProblem" class="news_box_right2">
        <div
          class="news_box_right_silide"
          v-for="(item,index) in problemList"
          :key="index"
          @click="onNewsItem(index)"
        >
          <div class="slide_item">
            <h4>{{item.title}}</h4>
            <p v-html="item.synopsis"></p>
          </div>
        </div>
      </div> -->
    </div>
    <div
      @click="onMore"
      class="more"
      style=" cursor: pointer;"
      :to="{ name: 'jap_news' }"
    >
      <span>もっと</span>
      <!-- 箭头背景 -->
      <i></i>
    </div>
  </div>
</template>
<script>
import { news_article_cate, news_list, problem_list } from "@/api/news.js";
export default {
  data() {
    return {
      problemList: null,
      ifHideProblem: false,
      news_cate: [], //新闻分类
      news_list: [], //新闻列表
      currentIndex: null
    };
  },
  mounted() {
    //获取首页新闻分类
    this.getNews_cate();
  },
  methods: {
    //
    //查看更多
    onMore(link, index) {
      //   if (this.currentId == "00") {
      //     this.$router.push({
      //       name: "jap_problem",
      //       query: { currentIndex: this.currentIndex ,id:this.currentId},
      //     });
      //   } else {
      this.$router.push({
        name: "jap_professional",
        query: { currentIndex: this.currentIndex, id: this.currentId }
      });
      //   }
    },
    //加载新闻分类
    getNews_cate() {
      news_article_cate().then(res => {
        this.news_cate = res.data.data.JAP;
        //  news_list(1：分页页数 ,4：限制个数 ， id :分类id)
        return this.getNews_list(1, 4, this.news_cate[0].id, 0);
      });
    },
    //获取新闻列表
    getNews_list(page, limit, cid, index) {
      this.$store.commit("changeNewsCateCurrentJAP", cid);
      this.currentId = cid;
      this.currentIndex = index;
      this.ifHideProblem = false;
      news_list({ page, limit, cid }).then(res => {
        res.data.data.map(item => {
          item.time = item.date_time.split("-");
        });
        this.news_list = res.data.data;
      });
    },
    //点击单项新闻信息
    onNewsItem(index) {
      if (this.currentId == "00") {
        return;
      }
      let id = this.news_list[index].id;
      this.$router.push({
        name: "jap_professional_details",
        query: { id: id }
      });
    },
    //加载问题解答
    onProblem_list() {
      this.$store.commit("changeNewsCateCurrentJAP", "00");
      this.currentId = "00";
      this.currentIndex = 2;
      problem_list({ limit: 4 }).then(res => {
        this.ifHideProblem = true;

        this.problemList = res.data.data;
      });
    }
  }
};
</script>
<style scoped src="./sass/home.css"></style>
